<template>
  <div class="ff">
    <main id="sketch">
      <canvas id="canvas" data-img=""></canvas>
      <div class="mask">
        <div id="maskInner" class="mask-inner"></div>
      </div>
    </main>
    <svg xlmns="http://www.w3.org/2000/svg" version="1.1" style="display: none;">
      <filter id="heat" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
        <feTurbulence id="heatturb" type="fractalNoise" numOctaves="1" seed="2" />
        <feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="22" in="SourceGraphic" />
      </filter>
    </svg>
  </div>
</template>
<script setup lang='ts'>
  import { nextTick } from 'vue';
  import './js/TweenMax.min.js'
  const indexaScript = document.createElement('script');
  indexaScript.src = './js/indexa.js';
  indexaScript.defer = true;

  // 当 TweenMax.min.js 加载完成后再插入 indexa.js 的 script 标签 
  document.addEventListener('DOMContentLoaded', () => {
    document.body.appendChild(indexaScript);
  });

  nextTick(() => {

    document.querySelectorAll('div').forEach(item => {
      item.style.cssText += `
    display: initial;
  `;
    });

    var timeline = new TimelineMax({
      repeat: -1,
      yoyo: true
    }),
      feTurb = document.querySelector('#heatturb');

    timeline.add(
      new TweenMax.to(feTurb, 8, {
        onUpdate: function () {
          var bfX = this.progress() * 0.01 + 0.025,
            bfY = this.progress() * 0.003 + 0.01,
            bfStr = bfX.toString() + ' ' + bfY.toString();
          feTurb.setAttribute('baseFrequency', bfStr);
        }
      }),
      0);


  });
</script>



<script lang="ts">

</script>


<style scoped>
  @import url("./css/index.css");
  /* .ff{
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
  } */
</style>